<template>
  <el-form
    :model="addEditForm"
    ref="addEditForm"
    label-width="105px"
    label-position="left"
    class="pg-shaohuo-content-add-edit-banner">
    <el-dialog
      :title="`${type}banner`"
      :before-close="beforeDialogClose"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- 表单主题
      -------------------------- -->
      <el-form-item 
        label="banner类型"
        prop="type"
        :rules="{ required: true, message: '请选择banner类型', trigger: 'blur' }">
        <el-select v-model="addEditForm.type">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item 
        label="banner名称"
        prop="name"
        :rules="{ required: true, message: '请输入banner名称', trigger: 'blur' }">
        <el-input v-model="addEditForm.name"></el-input>
      </el-form-item>

      <el-form-item 
        label="banner链接"
        prop="link">
        <el-input v-model="addEditForm.link"></el-input>
      </el-form-item>

      <el-form-item 
        label="banner图"
        prop="pic_url"
        :rules="{ required: true, message: 'banner图没有上传', trigger: 'blur' }">
        <comp-img-upload
          model="pic_url"
          ref="pic_url"
          :clearAllImg="clearAllImgByToogle"
          :imgsrc="addEditForm.pic_url"
          :uploadImg="uploadImg"
          :OSSPolicy="OSSPolicy"
          @fileChange="uploadFileChange"
          @success="uploadSuccess"
          @error="uploadError"></comp-img-upload>
      </el-form-item>
      
      <!-- 底部按钮区
      -------------------------- -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
          @click="submitForm"
          :loading="loadingBtn === '确定'">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { ShaohuoContentService } from 'services/Api'
import {
  btnLoadingMixin,
  formAddEditMixin,
  dialogCoreMixin
} from 'services/Public'
import { mapState } from 'vuex'

import { dialogUploadMixin } from './dialog-mixins'

export default {
  name: 'PgTypeAddBanner',
  mixins: [
    btnLoadingMixin,
    formAddEditMixin,
    dialogCoreMixin,
    dialogUploadMixin
  ],
  data () {
    return {
      addEditForm: {
        type: '',
        name: '',
        link: '',
        pic_url: ''
      },
      typeList: [ // 类型列表
        { name: '无', value: '0' },
        { name: 'h5', value: '1' },
        { name: '商品', value: '2' },
        { name: '店铺', value: '3' }
      ]
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 添加参数
    addBannerParam () {
      return {
        acc_id: this.acc_id,
        type: this.addEditForm.type,
        name: this.addEditForm.name,
        pic_url: this.addEditForm.pic_url,
        link: this.addEditForm.link
      }
    },
    // 编辑捎货类型参数
    editBannerParam () {
      return {
        acc_id: this.acc_id,
        id: this.editData.id,
        type: this.addEditForm.type,
        name: this.addEditForm.name,
        pic_url: this.addEditForm.pic_url,
        link: this.addEditForm.link
      }
    }
  },
  methods: {
    // 关闭弹窗前重置表单
    beforeDialogClose (done) {
      if (done) done()
      this.isEditing = false
      this.resetForm()
      this.addEditForm = {
        type: '',
        name: '',
        link: '',
        pic_url: ''
      }
      this.clearAllImgs()
    },
    // formAddEditMixin需要 - 编辑时将传入的源数据写入当前表单
    editDataHandler (v) {
      this.addEditForm.type = v.type || ''
      this.addEditForm.name = v.name || ''
      this.addEditForm.link = v.link || ''
      this.addEditForm.pic_url = v.pic_url || ''
    },
    // formAddEditMixin需要 - 提交成功后的操作
    afterSubmitSuccess () {
      this.dialogComplete()
    },
    // 添加新的捎货类型接口
    currentAddApi () {
      return ShaohuoContentService.addBanner(this.addBannerParam)
    },
    // 编辑捎货类型接口
    currentEditApi () {
      return ShaohuoContentService.editBanner(this.editBannerParam)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-content-add-edit-banner) {
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-select {
    width: 80%;
  }
  @include e(delete) {
    padding-left: $--padding-base;
  }
}
</style>
